<template>
  <div>
    <!-- 分配角色弹框 -->
    <el-dialog
      title="分配角色"
      :visible="dialogVisible"
      width="50%"
      @close="closeDialog"
      @open="openDialog"
    >
      <!-- default-expanded-keys和default-checked-keys设置默认展开和默认选中的节点 
      node-key 每个数节点用来作为唯一标识的和属性
      default-expand-all是否默认展开所有的节点
      :check-strictly（父子是否关联）在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
      show-checkbox 显示选择框
      getCheckedKeys	若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
      -->

      <el-tree
        ref="tree"
        :data="promissionList"
        show-checkbox
        node-key="id"
        :check-strictly="true"
        :default-expand-all="true"
        :default-checked-keys="checkList"
        :props="{label:'name'}">
      </el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getPermissionList} from '@/api/permission'
import {assignPerm, getRoleDetail} from '@/api/setting'
import transTree from '@/utils/transTree'
export default {
  name: "AssignRole",
  props: {
    dialogVisible: {
      default: false,
      type: Boolean,
    },
    // 用户的id 用来查询当前用户的角色信息
    curId: {
      default: null,
      type: String
    },
  },
  data() {
    return {
      promissionList: [],
      checkList:[],//回显选中的权限的数组
    };
  },
  mounted() {
    this.fetchPermissionList()
  },
  methods: {
    async openDialog() {
      this.$emit('open-dialog')
      // 在弹窗打开的时，对数据进行回显
      const res =await getRoleDetail(this.curId)
      // console.log(res);
      this.checkList = res.permIds
    },
    closeDialog() {
      this.$emit("close-dialog");
      // 清空数据
      // setCheckedKeys	通过 keys 设置目前勾选的节点，
      // 使用此方法必须设置 node-key 属性
      this.$refs.tree.setCheckedKeys([])
    },
    // 获取权限列表数据
    async fetchPermissionList() {
      const res = await getPermissionList()
      // console.log(res);
      this.promissionList = transTree(res)
    },
    // 分配权限确定按钮
    async confirm() {
      // 掉给角色分配权限接口
      //getCheckedKeys	若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
      await assignPerm({
        id:this.curId,
        permIds:this.$refs.tree.getCheckedKeys()
        })
      // 提示用户
      this.$message.success('分配权限成功')
       //关闭弹窗并清空数据
      this.closeDialog()
    }
  },
};
</script>

<style>
</style>